<template>
    <div class="file-block-item" @click="showFile(file,$event)">
        <div class="file-image">
            <FileIcon :file="file" ref="fileItemIcon" style="width:90%"/>
        </div>
        <div class="file-name">{{ formatName(file.name) }}</div>
        <div class="file-info">
            {{
                file.type == 'folder' ? formatDate(file.createTime) : formatSize(file.size)
            }}
        </div>
        <el-image-viewer v-if="imageViewer.show"
                         :url-list="imageViewer.previewSrcList"
                         :hide-on-click-modal="true" @close="imageViewer.show=false"
                         :teleported="true"/>
    </div>
</template>

<script>
import {ref} from "vue";
import {dayjs} from "element-plus";
import FileIcon from "./FileIcon.vue";
import {reactive} from "vue";
import strings from "../service/strings";
import {useRouter, useRoute} from 'vue-router'

export default {
    name: "FileBlockItem",
    components: {FileIcon},
    props: {
        file: {
            type: Object, request: true
        }
    },
    /**
     *
     * @param {file:FileItem} props
     */
    setup(props) {
        /**
         *
         * @type {Ref<FileIconInstance>}
         */
        const fileItemIcon = ref(null)
        const router = useRouter(), route = useRoute();
        const file = props.file;
        const imageViewer = reactive({
            show: false,
            previewSrcList: [file.path]
        })
        const showFile = (file) => {
            if (file.type == 'folder') {
                router.push(route.path + '?path=' + file.path);
                return;
            } else if (strings.isImage(file.type)) {
                imageViewer.show = true
                return;
            }
            // location.hash = '?path=' + file.path
        }
        return {
            file: props.file, showFile, fileItemIcon, imageViewer
        }
    },
    methods: {
        ...strings,
        // 对文件名进行处理
        formatName(name) {
            if (!name || name.length < 15) return name;
            const extIndex = name.lastIndexOf('.'),
                ext = name.substr(extIndex);
            return name.substr(0, (15 - ext.length)) + "**" + ext;
        },
    }
}
</script>

<style scoped>

</style>